{% extends "layout.html" %}
{% block content %}
    <div class="x-body layui-anim layui-anim-up">
        <form class="layui-form" lay-filter="form">
			<table class="layui-table">
				<tbody>
                    <tr>
						<th><span class="x-red">*</span>通道名称</th>
						<td colspan="1">
                            <input type="text" id="name" name="name" required="required" lay-verify="required"
                            autocomplete="off" class="layui-input">
                        </td>
						<th><span class="x-red">*</span>类型</th>
						<td colspan="1">
                            <input type="radio" id="type" name="type" lay-filter="type" value="0" title="公用" checked>
                            <input type="radio" id="type" name="type" lay-filter="type" value="1" title="单通道">
                            <input type="radio" id="type" name="type" lay-filter="type" value="2" title="多通道">
                        </td>
                    </tr>
					<tr>
						<th>协议</th>
						<td colspan="3">
							<select id="protocol" name="protocol" lay-filter="protocol"></select>
						</td>
					</tr>
					<tr>
						<th>数据类型</th>
						<td colspan="3">
							<select id="data_type" name="data_type" lay-filter="data_type">
                                <option value="0">2字节整型</option>
                                <option value="1">4字节浮点型</option>
                            </select>
						</td>
					</tr>
					<tr id="terminal_part">
						<th>调度终端设备厂家</th>
						<td colspan="3">
							<select id="terminal_type" name="terminal_type" lay-filter="terminal_type">
								<option value="0">默认</option>
								<option value="1">中科福瑞</option>
							</select>
						</td>
					</tr>
					<tr id="host_part">
						<th><span class="x-red">*</span>主机IP</th>
						<td>
							<input type="text" id="host_ip" name="host_ip" required="required" lay-verify="host_ip"
                            autocomplete="off" class="layui-input">
						</td>
						<th><span class="x-red">*</span>主机端口号</th>
						<td>
							<input type="text" id="port" name="port" required="required|number" lay-verify="port"
                            autocomplete="off" class="layui-input" value="502">
						</td>
					</tr>
					<tr id="file_part">
						<th>根目录</th>
						<td colspan="3">
							<input type="text" id="path" name="path" required="required" lay-verify="path"
                            autocomplete="off" class="layui-input">
						</td>
					</tr>
					<tr id="ftp_part">
						<th>用户名</th>
						<td>
							<input type="text" id="filename" name="filename" required="required" lay-verify="filename"
								   autocomplete="off" class="layui-input" value="">
						</td>
						<th>密码</th>
						<td>
							<input type="text" id="password" name="password" lay-verify="password" class="layui-input" value="">
						</td>
					</tr>
					<tr class="com_part">
						<th>com口</th>
						<td>
							<!-- <input type="text" id="com" name="com" required="number" lay-verify="com"
                            autocomplete="off" class="layui-input" value="COM1"> -->
							<select id="com" name="com" lay-filter="com"></select>
						</td>
						<th class="com_part_ftp">波特率</th>
						<td class="com_part_ftp">
							<input type="text" id="band_rate" name="band_rate" required="number" lay-verify="band_rate"
                            autocomplete="off" class="layui-input" value="9600">
						</td>
					</tr>
					<tr class="com_part">
						<th>奇偶校验</th>
						<td>
							<input type="text" id="parity" name="parity" required="number" lay-verify="parity"
                            autocomplete="off" class="layui-input" value="2">
						</td>
						<th>停止位</th>
						<td>
							<input type="text" id="stop" name="stop" required="number" lay-verify="stop"
                            autocomplete="off" class="layui-input" value="1">
						</td>
					</tr>
					<tr class="channel4collect_part">
						<th>采集通道</th>
						<td colspan="3">
							<select id="channel4collect" name="channel4collect" lay-filter="channel4collect"></select>
						</td>
					</tr>
                    <tr>
						<th><span class="x-red">*</span>运行</th>
						<td colspan="3">
                            <input type="checkbox" name="enable" lay-skin="switch" lay-text="运行|停用" checked>
                        </td>
                    </tr>
					<tr>
						<td colspan="2" style="text-align: center;">
                            <button id="confirmBtn" class="layui-btn" lay-filter="save" lay-submit="">
                                增加
                            </button>
                        </td>
						<td colspan="2" style="text-align: center;">
							<button  type="reset" class="layui-btn">
                                重置
                            </button>
						</td>
					</tr>
                </tbody>
            </table>
        </form>
    </div>
    <script>
        var channel_id=GetQueryString('channel_id');
        var channel4collect_id=0;
        layui.use(['form','layer'], function(){
            $ = layui.jquery;
            var form = layui.form
            ,layer = layui.layer;
            $.ajax({
                url:"../protocol/protocoList",
                type:"POST",
                dataType:"json",
                success:function(data){
                    $("protocol").empty();
                    $.each(data.data,function(protocol_key,protocol_val){
                        $("#protocol").append(new Option(protocol_val.protocol,protocol_val.protocol_id));
                    });
                    layui.form.render();
                    set_part_show();
					$.ajax({
						url:"../modbus/read_serial_ports",
						type:"POST",
						dataType:"json",
						success:function(data){
							$("com").empty();
							$.each(data.data,function(com_key,com_val){
								$("#com").append(new Option(com_val,com_val));
							});
							layui.form.render();
                    		if(channel_id!=null){
                        data={'channel_id':channel_id};
                        $('#confirmBtn').html('保存');
                        $.ajax(
                        {
                            url:'readChannel'
                            ,type:'POST'
                            ,dataType:'json'
                            ,data:data
                            ,success:function(data){
                                //设置内容
                                if(data.code==0){
                                    channel_id=data.data[0].channel_id;
                                    form.val("form",{
                                        name:data.data[0].name,
                                        host_ip:data.data[0].host_ip,
                                        port:data.data[0].port,
                                        protocol:data.data[0].protocol,
                                        data_type:data.data[0].data_type,
                                        type:data.data[0].type,
                                        path:data.data[0].path,
										terminal_type:data.data[0].path,//终端 共用path
                                        filename:data.data[0].filename,
                                        com:data.data[0].com,
                                        band_rate:data.data[0].band_rate,
                                        parity:data.data[0].parity,
                                        stop:data.data[0].stop,
                                        enable:data.data[0].enable=="1.0"
                                    });
                                    channel4collect_id=data.data[0].channel4collect_id;
                                    $(".channel4collect_part").hide();
                                    layui.form.render();
                                    set_part_show();
                                }
                            }
                        });
                    }
						}
					});
                }
            });
            //自定义验证规则
            form.verify({
                host_ip: function(value){
                    if(!["1","3","5"].includes($("#protocol").val()))return;
                    var exp=/^((25[0-5]|2[0-4]\d|((1\d{2})|([1-9]?\d))).){3}(25[0-5]|2[0-4]\d|((1\d{2})|([1-9]?\d)))$/;
                    if(!exp.test(value)){
                        return '必须是合法的IPV4地址';
                    }
                },
                port: function(value){
                    if(!["1","3","5"].includes($("#protocol").val()))return;
                    var exp=/^\d+$/;
                    if(!exp.test(value)){
                        return '必须是整数';
                    }
                    var val=parseInt(value);
                    if(val<0||val>65525){
                        return '必须是0-65535之间的合法端口号';
                    }
                },
                // path: function(value){
                //     if(value.length==0)
                //         return "必须填写目录";
                // },
                // filename: function(value){
                //     if(value.length==0&&$("#protocol").val()==3)
                //         return "必须填写文件名";
                // },
                band_rate: function(value){
                    var exp=/^\d+$/;
                    if(!exp.test(value)&&$("#protocol").val()==2){
                        return '必须是整数';
                    }
                    if($("#protocol").val()==2&&value.length==0)
                    return "必须填写波特率";
                },
            });
            function set_part_show(){
                if(channel_id==1){
                    $("#name").attr("disabled",true);
                    $("#protocol").attr("disabled",true);
                }else if(channel_id==null){
                    $("input:radio[name='type'][value='2']").attr("disabled",true);
                }
                $("#host_part").hide();
                $("#file_part").hide();
				$("#ftp_part").hide();
                $(".com_part").hide();
                $("#terminal_part").hide();
                if(["1","3","5","8","9","10","11","12","13","14","15"].includes($("#protocol").val())){
                    $("#host_part").show();
                }
				if($("#protocol").val()==3){
					$("#terminal_part").show();
				}
                if($("#protocol").val()==2)
                    $(".com_part").show();
                if(["8","9"].includes($("#protocol").val())){
					$("#file_part").show();
					$("#ftp_part").show();
				}
                if(form.val("form")["type"]==0||form.val("form")["type"]==2){
                    $(".channel4collect_part").hide();
                }else{
                    $(".channel4collect_part").show();
                    $.ajax({
                        url:"../channel4collect/channelList",
                        type:"POST",
                        dataType:"json",
                        success:function(data){
                            $("#channel4collect").empty();
                            $.each(data.data,function(channel4collect_key,channel4collect_val){
                                if(channel4collect_val.protocol==2||channel4collect_val.protocol==5||channel4collect_val.protocol==7)
                                    $("#channel4collect").append(new Option(channel4collect_val.name+"("+channel4collect_val.com+")",channel4collect_val.channel_id));
                                else
                                    $("#channel4collect").append(new Option(channel4collect_val.name+"("+channel4collect_val.host_ip+":"+channel4collect_val.port+")",channel4collect_val.channel_id));
                            });
                            form.val("form",{
                                channel4collect:channel4collect_id
                            });
                            layui.form.render();
                        }
                    });
                }
            }
            form.on('select(protocol)',function(data){
                set_part_show();
            });
            form.on('radio(type)',function(data){
                var index = parent.layer.getFrameIndex(window.name);
                if(form.val("form")["type"]==2){
                    parent.layer.full(index); //执行最大化
                    x_admin_show('编辑通道点表','../dataItem2channel/dataItem2channel-list.html?channel_id='+channel_id,800,450);
                }
                set_part_show();
            });
            //监听提交
            form.on('submit(save)', function(data){
                if(channel_id!=null)
                    data.field['channel_id']=channel_id;
                if(data.field['password']!==""){
					data.field['com'] = data.field['password']
				}
                $.ajax({url:'saveChannel',type:'POST',dataType:'json',data:data.field,success:function(data){
                    if(data.code==0){
                        // layer.msg('操作成功!');
                        layer.alert("操作成功", {icon: 6},function () {
                            parent.location.reload();
                            // 获得frame索引
                            var index = parent.layer.getFrameIndex(window.name);
                            //关闭当前frame
                            parent.layer.close(index);
                        });
                    }
                }});
                return false;
            });
        });
    </script>
{% endblock %}